<script setup lang="ts">
import { reactive, ref, watch } from "vue"
import { NCard, NDatePicker, NButton, NSpace, NSwitch, useMessage } from "naive-ui"
import {
  getZation,
  getRanking,
  getDataList,
  getSchoolAdmin,
  getUserRanking,
  handleAdminMail,
} from "@api/index"
import echartsLine from "./components/echartsLine.vue"
import goodsList from "./components/goodsList.vue"
import { getStorage } from "@/util/cache"
const orgId = getStorage("orgId")
const dataList: any = reactive({
  pricesCount: 0,
  profits: 0,
  saleCount: 0,
  num: 0,
  userCount: 0,
})
const zationData: any = ref([])
const rankingData = ref([])
const adminCount = reactive({ list: [] })
const userRanking = ref([])
const message = useMessage()
getZation({ orgId }).then((res: any) => {
  zationData.value = Object.keys(res.data).map((key: any) => {
    return { title: key, data: res.data[key] }
  })
})
getRanking({ orgId }).then((res: any) => {
  rankingData.value = res.data
})
// getUserRanking({}).then((res: any) => {
//   userRanking.value = res.data
// })
const handleGetAdminCount = () => {
  getSchoolAdmin({ orgId }).then((res: any) => {
    adminCount.list = res.data

  })
}
handleGetAdminCount()
const handleGetUserRanking = async (data: any) => {
  const res: any = await getUserRanking(data)
  userRanking.value = res.data
}

const handleGetDataList = (data: any) => {
  getDataList({ ...data, orgId }).then((res: any) => {
    dataList.pricesCount = res.data?.pricesCount
    dataList.profits = res.data?.profits
    dataList.saleCount = res.data?.saleCount
    dataList.num = res.data?.num
    dataList.userCount = res.data?.userCount
  })
}
handleGetDataList({})
handleGetUserRanking({ type: "Count" })
const range = ref<[number, number]>([Date.parse("2022-10-9 00:00:00"), Date.now()])

watch(
  () => range,
  newValue => {
    handleGetDataList({
      startDate: formatDate(newValue.value[0]),
      endDate: formatDate(newValue.value[1]),
    })
  },
  {
    deep: true,
  }
)
const formatDate = (value: any) => {
  const date = new Date()
  date.setTime(value)
  let month: any = date.getMonth() + 1
  if (month < 10) month = "0" + month
  let day: any = date.getDate()
  if (day < 10) day = "0" + day
  let hours: any = date.getHours()
  if (hours < 10) hours = "0" + hours
  let minutes: any = date.getMinutes()
  if (minutes < 10) minutes = "0" + minutes
  let seconds: any = date.getSeconds()
  if (seconds < 10) seconds = "0" + seconds
  const time =
    date.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
  return time
}

const changeEmail = (value: boolean, adminId: number) => {
  handleAdminMail({ adminId, receiveEmail: value === false ? 0 : 1 }).then((res: any) => {
    if (res.code === 200) {
      message.success(res.msg)
    } else {
      message.error(res.msg)
    }
    handleGetAdminCount()
  })
}
</script>
<template>
  <div class="index">
    <div class="left">
      <div class="datalist">
        <n-space>
          <n-date-picker value-format="yyyy.MM.dd HH:mm:ss" v-model:value="range" type="datetimerange" clearable
            class="timer" />
          <n-button @click="() => handleGetDataList({})">重置</n-button>
        </n-space>
        <div class="cardBox">
          <n-card class="card" title="总销售额" hoverable> {{ dataList.pricesCount }}元 </n-card>
          <n-card class="card" title="总利润额" hoverable> {{ dataList.profits }}元 </n-card>
          <n-card class="card" title="总订单数量" hoverable>
            {{ dataList.saleCount }}
          </n-card>
          <n-card class="card" title="用户数" hoverable>
            {{ dataList.userCount }}
          </n-card>
          <n-card class="card" title="有效用户数" hoverable>
            {{ dataList.num }}
          </n-card>
        </div>
        <div class="admin">
          <n-card class="card" v-for="item in adminCount.list" :title="item.adminName" hoverable>
            <div class="card_item">
              <p>总数:{{ item?.numCount }}</p>
              <p>当日单数:{{ item?.numDay }}</p>
              <p>当日分钱:{{ item?.numDayMarry }}</p>
              <p>昨日单数:{{ item?.numYesterDay }}</p>
              <p>昨日分钱:{{ item?.numYesterDayMarry }}</p>
              是否接收邮件
              <n-switch :default-value="item.receiveEmail === 0 ? false : true"
                :on-update:value="(value: boolean) => changeEmail(value, item.id)" />
            </div>
          </n-card>
        </div>
      </div>
      <div class="line">
        <echartsLine :zationData="zationData" />
      </div>
    </div>
    <div class="right">
      <goodsList :rankingData="rankingData.slice(0, 11)" :userRanking="userRanking"
        :handleGetRanking="handleGetUserRanking" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-y: scroll; //竖向滚动
  overflow-x: scroll; //横向滚动

  @media screen and (max-width: 600px) {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .left {
    width: 50vw;
    padding: 10px;
    display: flex;
    flex-direction: column;

    .datalist {
      // height: 50%;
      padding: 15px;
      background-color: var(--BlockBgColor);

      @media screen and (max-width: 600px) {
        width: 100%;
      }

      .timer {
        width: 500px;

        @media screen and (max-width: 600px) {
          width: 250px;
        }
      }

      .cardBox {
        margin-top: 12px;
        display: flex;
        justify-content: space-around;

        @media screen and (max-width: 600px) {
          margin-top: 12px;
          display: flex;
          flex-direction: column;
          // justify-content: space-between;
        }

        .card {
          max-width: 150px;

          @media screen and (max-width: 600px) {
            max-width: 100%;
          }
        }
      }

      .admin {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;

        @media screen and (max-width: 600px) {
          display: flex;
          flex-direction: column;
          margin-top: 20px;
        }

        .card {
          max-width: 180px;

          @media screen and (max-width: 600px) {
            max-width: 100%;
          }

          .card_item {
            @media screen and (max-width: 600px) {
              display: grid;
              grid-template-columns: 1fr 1fr 1fr;
            }
          }
        }
      }
    }

    .line {
      // padding: 10px;
      margin-top: 20px;
      background-color: var(--BlockBgColor);
      height: 50%;

      @media screen and (max-width: 600px) {
        background-color: var(--BlockBgColor);
        margin-top: 30px;
        width: 100%;
        height: 160px;
      }
    }
  }

  .right {
    padding: 10px;
    width: 50vw;
    // height: 100vh;
  }
}
</style>
